import HttpUtils from "../utils/HttpUtils";
import EventEmitterUtils from "../utils/EventEmitterUtils";

export default class Hotkeywords extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            lists: []
        };
    }

    componentDidMount() {
        // this.getHotWord();
    }

    getHotWord() {
        HttpUtils.hotword()
            .then(res => {
                console.log(res);
                this.setState({
                    lists: res.hotowrds
                });
            })
            .catch(err => {
                console.log(err);
            });
    }

    clickHotWord(hotword) {
        if (global.tab_select_index == 1) {
            $state.go({
                stateName: "/searchResults",
                params: { supp: hotword }
            });
            return;
        }
        $state.go({
            stateName: "/searchProduct",
            params: { key: hotword }
        });
    }

    componentWillUnmount() {
        EventEmitterUtils.off("searchPageHashChange");
    }

    render() {
        const { lists } = this.state;
        if (lists.length == 0) {
            return null;
        }
        const lists_for_map = lists.slice(1);

        return (
            <div className={"search-comps-hot-keyword"}>
                <p className={"search-comps-hot"}>热门搜索：</p>

                <p
                    onClick={() => {
                        this.clickHotWord(lists[0]);
                    }}
                    className={"search-comps-hot-item"}
                >
                    {lists[0]}
                </p>
                {lists_for_map.map((item, index) => (
                    <div
                        onClick={() => {
                            this.clickHotWord(item);
                        }}
                        key={index}
                        style={{ display: "flex" }}
                    >
                        <p className={"search-comps-hot-keyword-divied"}>|</p>
                        <p className={"search-comps-hot-item"}>{item}</p>
                    </div>
                ))}
            </div>
        );
    }
}
